<template>
    <table id="input_table">
  <tr>
    <th>属性</th><th>输入框</th><th>属性</th><th>输入框</th>
  </tr>
  <tr v-for="att in atts">
    <td>{{ att[0] }}</td><td><input type="number" v-model="price_line[att[0]]"></td><td>{{ att[1] }}</td><td><input type="number" v-model="price_line[att[1]]"></td>
  </tr>
  <tr>
    <td>usedtime</td><td><input type="number" v-model="price_line.usedtime"></td><td>price</td><td>{{ price_line.price }}</td>
  </tr>
  
</table>
    <div>
        <select v-model="addr">
            <option v-for="server in availableServerList">{{ server.addr }}-{{ server.model_name }}</option>
        </select>
            <span @click.stop="predict_line()">[预测]</span>
            <span @click.stop="save_line()">[保存]</span>
            <span @click.stop="predict_set()">[预测所有训练集]</span>
    </div>
    <div>
        从<input type="file" accept=".csv" @change="fileChanged"><span @click.stop="upload()">[上传]</span>
    </div>
    <div>{{ err }}</div>
</template>
<script>
import axios from 'axios';
export default{
    data(){
        return{
            price_line:{
                'model':0,
                'brand':0,
                'body_type':0,
                'fuel_type':0,
                'gearbox':0,
                'power':0,
                'kilometer':0,
                'not_repaired_damage':0,
                'region_code':0,
                'v_0':0,
                'v_1':0,
                'v_2':0,
                'v_3':0,
                'v_4':0,
                'v_5':0,
                'v_6':0,
                'v_7':0,
                'v_8':0,
                'v_9':0,
                'v_10':0,
                'v_11':0,
                'v_12':0,
                'v_13':0,
                'v_14':0,
                'usedtime':0,
                'price':0
            },
            file:null,
            addr:"",
            model_name:"",
            availableServerList:[],
            atts:[['model', 'brand'], ['body_type', 'fuel_type'], ['gearbox', 'power'], ['kilometer', 'not_repaired_damage'], ['region_code', 'v_0'], ['v_1', 'v_2'], ['v_3', 'v_4'], ['v_5', 'v_6'], ['v_7', 'v_8'], ['v_9', 'v_10'], ['v_11', 'v_12'], ['v_13', 'v_14']]
        }
    },
    inject:["need_wait","neednt_wait","set_err"],
    methods:{
        upload(){
            this.need_wait()
            let param = new FormData(); //创建form对象
            param.append('file',this.file);//通过append向form对象添加数据
            let config = {
                headers:{'Content-Type':'multipart/form-data'}
            };
            axios.post("/price/upload",param,config)
                .then(response =>{
                    this.set_err(response.data.err)
                    this.neednt_wait()
                })
                .catch((error)=> {
                    this.set_err(error);
                });
        },
        save_line(){
            this.need_wait()
            axios.post("/price/add",this.price_line)
                .then(response =>{
                    this.set_err(response.data.err)
                    this.neednt_wait()
                })
                .catch((error)=> {
                    this.set_err(error);
                });
        },
        predict_line(){
            this.need_wait()
            this.model_name = this.addr.split("-")[1]
            this.addr = this.addr.split("-")[0]
            axios.post("/price/predict/single",{"model_name":this.model_name,"addr":this.addr,"data":this.price_line})
                .then(response =>{
                    this.price_line.price = response.data.data
                    this.set_err(response.data.err)
                    this.neednt_wait()
                })
                .catch((error)=> {
                    this.set_err(error);
                });
        },
        predict_set(){
            this.need_wait()
            this.model_name = this.addr.split("-")[1]
            this.addr = this.addr.split("-")[0]
            axios.post("/price/predict/set",{"model_name":this.model_name,"addr":this.addr})
                .then(response =>{
                    this.set_err(response.data.err)
                    this.neednt_wait()
                })
                .catch((error)=> {
                    this.set_err(error);
                });
        },
        get_availableServers(){
            this.need_wait()
            axios.get("/servers")
                .then( (response) =>{
                    this.availableServerList = new Array()
                    response.data.data.forEach(element => {
                        if(element.status){
                            this.availableServerList.push(element)
                        }
                    });
                    this.set_err(response.data.err)
                    this.neednt_wait()
                })
                .catch((error)=> {
                    this.set_err(error);
                });
        },
        fileChanged(e){
            const files = e.target.files
            this.file = files[0]
        },
    },
    mounted(){
        this.get_availableServers()
    }
}
</script>
<style scoped>
select{
    height: 23px;
    width: 440px;
}
td{
    border-style: solid;
    border-color: black;
    width: 885px;
    text-align: center;
}
span{
    margin-top: 5px;
    margin-bottom: 5px;
    margin-left: 5px;
    margin-right: 5px;
}
#input_table{
    height: 667px;
}
</style>